/**
* 轮播
*/
<template>
	<view>
		<swiper class="screen-swiper"  :indicator-dots='false' :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="jump_to(item.id)">
				<image :src="domain+item.thumb" mode="aspectFill"></image>
				<view class="item-title-box">
					<view class="mask">
						
					</view>
					
					<view class="item-title-box-title">{{item.title}}</view>
					
				</view>
				<!-- <video :src="item.thumb" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'Rotation',
		props: ['dat'],
		data() {
			return {
				cardCur: 0,
				domain:this.Reques.DomainH,
				swiperList: this.dat,
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		methods: {
			jump_to(id) {
				this.$emit("clickActive",id);
			}


		}


	}
</script>

<style scoped>
	.screen-swiper {
		width: 100vw;
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	.item-title-box{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		

	}
	.item-title-box-title{
		position: absolute;
		z-index: 2;
		color: white;
		top: 0;
		height: 80rpx;
		width: 100%;
		font-size: 4vw;
		line-height: 80rpx;
		padding-left: 2vw;
	}
	.mask{
		position: relative;
		z-index: 1;
		background-color: #000000;
		opacity: 0.5;
		width: 100%;
		height: 100%;
	}
</style>
